<template>
  <div class="body-box">
    <el-autocomplete
      popper-class="my-autocomplete"
      v-model="search_key"
      placeholder="请输入内容"
      style="width:100% "
      :fetch-suggestions="querySearch"
      @select="handleSelect"
    >
      <i class="el-icon-search el-input__icon" slot="suffix"></i>
      <template slot-scope="{ item }">
        <div class="name">{{ item.Title }}</div>
        <span class="addr">{{ item.Province }}{{ item.City }}{{ item.Address }}</span>
      </template>
      <!-- <template slot="append">
        <div @click.stop="searchBtn()" class="search-tbs">搜索一下</div>
      </template>-->
    </el-autocomplete>
    <!-- 搜索结果 -->
    <div class="search-res-info">
      <el-form label-position="left" label-width="80px" size="mini" v-if="team_info.Id">
        <el-form-item label="logo">
          <img class="search-team-logo" :src="team_info.Logo" alt />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="跑团名称">{{team_info.Title}}</el-form-item>
            <el-form-item label="ID">{{team_info.IdCode}}</el-form-item>
            <el-form-item label="跑团地址">{{team_info.Province}}{{team_info.City}}{{team_info.Address}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="团长名称">{{team_info.Contacter}}</el-form-item>
            <el-form-item label="联系方式">{{team_info.Contact}}</el-form-item>
            <el-form-item label="加入费用">{{team_info.cation_price}}</el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button size="mini" class="com-btn" @click="submit()">{{is_apply ? '申请加入' : '邀请加入'}}</el-button>
        </el-form-item>
      </el-form>
      <div class="no-team-info" v-else>请输入跑团名称或ID搜索</div>
    </div>
  </div>
</template>

<script>
export default {
  props: { is_apply: {} },
  data() {
    return {
      search_key: "",
      team_info: {},
      restaurants: []
    };
  },
  mounted() {
    // this.restaurants = this.loadAll();
  },
  methods: {
    //申请加入、邀请加入
    submit() {
      if (this.team_info.cation_price > 0 && this.is_apply) {
        this.$confirm(
          "确定申请加入?需要交纳" + this.team_info.cation_price + "元费用",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            var data = {
              club_id: this.team_info.Id,
              is_apply: this.is_apply
            };
            this.ajaxs("club/clubApply", {
              data: data,
              success: res => {
                this.toast(res.code, res.msg);
              }
            });
          })
          .catch(() => {
          });
      } else {
        var data = {
          club_id: this.team_info.Id,
          is_apply: this.is_apply
        };
        this.ajaxs("club/clubApply", {
          data: data,
          success: res => {
            this.toast(res.code, res.msg);
          }
        });
      }
    },
    querySearch(queryString, cb) {
      var results = [];
      this.ajaxs("club/clubSearch", {
        data: { key_words: queryString, is_apply: this.is_apply },
        success: res => {
          results = res.msg;
          cb(results);
        }
      });
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.team_info = item;
      console.log(item);
    }
  }
};
</script>

<style>
.no-team-info {
  text-align: center;
  margin-top: 100px;
  font-size: 16px;
  color: #999;
}
.search-res-info {
  margin-top: 40px;
}
.search-team-logo {
  width: 50px;
  height: 50px;
  border-radius: 3px;
}
.search-tbs {
  height: 100%;
  height: 38px;
  line-height: 38px;
}
.search-input-box {
  position: relative;
}
.search-input-box .el-input-group__append {
  padding: 0 !important;
  width: 100px;
  text-align: center;
  cursor: pointer;
  background: #8a70c6;
  color: #fff;
  border-color: #8a70c6;
}
.el-input__inner:focus {
  border-color: #8a70c6;
}
.search-list {
  position: absolute;
  width: 658px;
  top: 40px;
  border-top: 0;
  max-height: 200px;
  overflow-y: auto;
  transition: all 0.1s linear;
  box-shadow: 1px 1px 3px rgba(26, 26, 26, 0.3);
  z-index: 9;
  background: #fff;
}
.search-list > li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: #333;
  overflow: hidden;
  cursor: pointer;
}
.search-list > li:hover {
  background: #f1f1f1;
}
.search-res-tag {
  float: right;
  margin-top: 8px;
}
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}
.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>